<template>
    <div class="swipers">
        <van-swipe class="my-swipe"  indicator-color="white">
        <van-swipe-item v-for='item in swipers' :key="item.imageUrl">
            <a href="javascript:void(0);">
            <img :src="item.imageUrl" />
            </a>
        </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
props:['val'],
data(){
    return {
      swipers:""
    }
},
watch:{
    val(){
        this.swipers = JSON.parse(this.val.itemData)[0].images
    }
},
}
</script>

<style lang='stylus' scoped>
.swipers
    background url('https://api.10street.cn/wap/images/home_2019/home_top_bg.png') 0px 0px / 100% no-repeat
    .my-swipe 
        width 80%
        margin 0 auto
        border-radius 0.1rem
        overflow hidden
        height
        .van-swipe-item 
            color #fff
            font-size 20px
            line-height 150px
            text-align center
            background-color #39a9ed
        img
            display block
            width 100%
            position: relative
            padding: 0px
            margin: 0px
</style>